require('../styles/progress.less');

import React from 'react';

class Progress extends React.Component{
	constructor(props){
		super(props);
		this.changeProgress=this.changeProgress.bind(this);
	}
	changeProgress(e) {
		let progressBar=this.refs.progressBar;
		let progress =(e.clientX- progressBar.getBoundingClientRect().left)/ progressBar.clientWidth;
        this.props.onProgressChange&&this.props.onProgressChange(progress);
		e.stopPropagation();
		e.preventDefault();

	}
	render() {
		let currentProgress={
			width:`${this.props.progress}%`,
			backgroundColor:this.props.barColor
		}
		return (
			<div className="components-progress" ref="progressBar" onClick={this.changeProgress}>
			  <div className="progress" style={currentProgress} ></div>
			</div>
			);
	}

}


Progress.defaultProps = {
	barColor:'#2f9842'
};

export default Progress;